﻿@model CloudStorageLight.SampleWeb.Models.FilesVM
@{
    ViewBag.Title = "Home" + Model.Current;
    Layout = "~/Views/Shared/_LayoutCloudStorage.cshtml";
}

<header class="nrm nlm">
    <div class="clearfix bg-gray fg-white" id="header-cont">
        <div class="place-right">
            <div class="margin10">
                <i class="icon-user"></i>
                @(Model.User.Name)
            </div>

        </div>
        <div class="place-left margin10">

            <nav class="horizontal-menu">
                <ul>
                    @Html.Partial("_HomeCommand")
                    @if (!this.Request.Browser.IsMobileDevice)
                    {
                        <li><a id="download-command" class="command-link" href="javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdDownload)</a></li>
                        <li><a id="upload-command" class="command-link" href="javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdUpload)</a></li>
                    }
                    @if (!Model.User.IsGuest)
                    {
                        <li>
                            <a class="dropdown-toggle command-link" href="#">@(CloudStorageLight.SampleWeb.Models.Messages.CmdOperation)</a>
                            <ul class="dropdown-menu bg-gray" data-role="dropdown">
                                @if (!this.Request.Browser.IsMobileDevice)
                                {
                                    <li><a id="selectall-command" class="command-link bg-hover-blue" href="javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdSelectAll)</a></li>
                                    <li><a id="unselectall-command" class="command-link bg-hover-blue" href=" javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdUnSelectAll)</a></li>
                                    <li class="divider"></li>
                                    <li><a id="move-command" class="command-link bg-hover-blue" href="javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdMove)</a></li>
                                    <li><a id="remove-command" class="command-link bg-hover-blue" href="javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdRemove)</a></li>
                                }
                                else
                                {
                                    <li><a id="upload-command" class="command-link" href="javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdUpload)</a></li>
                                }
                                <li class="divider"></li>
                                <li><a id="newfolder-command" class="command-link bg-hover-blue" href="javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdNewFolder)</a></li>
                                <li><a id="removefolder-command" class="command-link bg-hover-blue" href="javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdRemoveFolder)</a></li>
                                @if (Model.FolderControl)
                                {
                                    <li><a id="folder-setup-command" class="command-link bg-hover-blue" href="javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdFolderSetup)</a></li>
                                }
                            </ul>
                        </li>
                    }
                </ul>
            </nav>
        </div>
    </div>
    @if (!Model.User.IsGuest)
    {
        <div class="clearfix">
            <div class="place-right">
                <div class="input-control text size4 margin10">
                    <input type="text" id="query" name="query" placeholder="Search..." value="">
                    <button id="search" class="btn-search"></button>
                </div>
            </div>
            <div class="place-left">
                <nav class="breadcrumbs">
                    <div class="input-control text margin10" style="height:auto;">
                        <ul>
                            <li><a href="@Url.RouteUrl("files", new { id="" })/">Home</a></li>
                            @if (Model.Current.Length >= 2)
                            {
                                string path = Url.RouteUrl("files", new { id = "" }) + "/";
                                string current = Model.Current.Substring(1, Model.Current.Length - 2);
                                foreach (var item in current.Split('/'))
                                {
                                    path += Uri.EscapeDataString(item) + "/";
                                    <li>
                                        <a href="@(path)">
                                            @(item)
                                        @if (Model.Folder != null && Model.Folder.IsPublic() && path.EndsWith(Model.Current))
                                        {
                                            <i class="icon-cloud"></i>
                                        }
                                    </a>
                                </li>
                                }

                            }
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    }
</header>

<div id="create-folder-dialog" style="display:none;">
    <input type="text" id="newFolderName" />
    <p>
        <div>
            <button id="create-newFolder" class="button" type="button">OK</button>
            <button class="button" type="button" onclick="$('#create-folder-dialog').dialog('close');">Cancel</button>
        </div>
    </p>
    @Html.Hidden("currentPath", Model.Current)
</div>

<div id="rename-dialog" style="display:none;">
    <input type="hidden" id="renameSrcPath" />
    <table style="width:100%;">
        <tr>
            <td width="50%">
                <div id="rename-directory-list"></div>
            </td>
            <td width="50%">
                <input type="text" id="renameDistName" style="width:100%;" />
            </td>
        </tr>
    </table>
    <p>
        <div>
            <button id="rename-command" class="button" type="button">OK</button>
            <button class="button" type="button" onclick="$('#rename-dialog').dialog('close');">Cancel</button>
        </div>
    </p>
    @Html.Hidden("currentPath", Model.Current)
</div>

<div id="move-dialog" style="display:none;">
    <table style="width:100%;">
        <tr>
            <td>
                <div id="move-directory-list">
                </div>
            </td>
        </tr>
    </table>
    <p>
        <div>
            <button id="move-exec-command" class="button" type="button">OK</button>
            <button class="button" type="button" onclick="$('#move-dialog').dialog('close');">Cancel</button>
        </div>
    </p>
    @Html.Hidden("currentPath", Model.Current)
</div>

<div id="download-confirm-dialog" style="display:none;">
    <p>@(CloudStorageLight.SampleWeb.Models.Messages.MsgConfirmDownloadZip)</p>
    <div>
        <button id="download-zip-command" class="button" type="button">YES</button>
        <button id="download-files-command" class="button" type="button">NO</button>
    </div>
</div>


@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "upload", enctype = "multipart/form-data" }))
{
    if (!this.Request.Browser.IsMobileDevice)
    {
        <input type="file" id="upl" name="upl" style="display:none;" multiple />
    }
    else
    {
        <input type="file" id="upl" name="upl" style="display:none;" />
    }
    @Html.Hidden("current", (Model.Current))
}

<div id="folder-cont" class="listview-outlook">
    <div id="contextMenu-dialog" style="display:none;" class="bg-white">
        <ul class="horizontal-menu compact" style="position: relative;z-index:1">
            <li><a id="download-context-command" class="context-command-link" href="javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdDownload)</a></li>
            @if (!this.Request.Browser.IsMobileDevice)
            {
                <li><a id="showurl-context-command" class="context-command-link" href="javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdShowUrlLink)</a></li>
            }
            @if (!Model.User.IsGuest)
            {
                <li><a id="checkout-context-command" class="context-command-link" href="javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdCheckOut)</a></li>
                <li><a id="checkin-context-command" class="context-command-link" href=" javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdCheckIn)</a></li>
                <li><a id="remove-context-command" class="context-command-link" href="javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdRemove)</a></li>
                <li><a id="rename-context-command" class="context-command-link" href="javascript:void(0);">@(CloudStorageLight.SampleWeb.Models.Messages.CmdRename)</a></li>
            }
        </ul>
    </div>

    <div class="search-result-message">
    </div>
    <div id="file-items">

    </div>
</div>


<div id="directorySettings" style="height:100%;width:100%;display:none;">
        <div style="width:100%;height:360px;overflow:auto;">
            <table id="directory-access-list" style="width:100%;">
                <tr>
                    <th>@CloudStorageLight.SampleWeb.Models.Messages.MsgInUse</th>
                    <th>@CloudStorageLight.SampleWeb.Models.Messages.MsgRole</th>
                    <th>@CloudStorageLight.SampleWeb.Models.Messages.MsgReadAccess</th>
                    <th>@CloudStorageLight.SampleWeb.Models.Messages.MsgWriteAccess</th>
                    <th>@CloudStorageLight.SampleWeb.Models.Messages.MsgModifyAccess</th>
                    <th>@CloudStorageLight.SampleWeb.Models.Messages.MsgControlAccess</th>
                </tr>
            </table>
            <hr />
        </div>

        <hr />

        <button id="blobItemDetailOkButton" type="button" onclick="CloudStorageLight.StorageController.updateFolder();">@(CloudStorageLight.SampleWeb.Models.Messages.MsgSave)</button>
        <button type="button" onclick="CloudStorageLight.StorageController.closeUpdateFolderDialog();">@(CloudStorageLight.SampleWeb.Models.Messages.MsgCancel)</button>
</div>



<div id="file-drop-cont" style="display:none;">
    @(CloudStorageLight.SampleWeb.Models.Messages.MsgPleaseDropHere)
</div>


<p id="page-top" style="display:none;"><a href="javascript:void(0);"><i class=" icon-arrow-up-5"></i></a></p>

@section scripts{

<script id="fileitem-template" type="text/x-jquery-tmpl">
    <div class="list">

        {{if Type == "Directory"}}
            <a href="${$data.Url()}">
                <div class="list-content">
                    <i class="${$data.Icon()} icon"></i>
                    <div class="data">
                        <span class="list-title item-name">${Title}</span>
                    </div>
                </div>
            </a>
        {{else}}
            <div class="list-content">
                <a href="${$data.Url()}"><i class="${$data.Icon()} icon"></i></a>

                <div class="data blobfile" data-href="${$data.Url()}">
                    <span class="list-title">
                        <input type="checkbox" class="item-checkbox" name="${Path}" />
                        <span class="item-name">${Title}</span>
                    </span>
                    <div class="list-subtitle">
                        <span class="owner-userid">${Owner}</span>
                        <span>${LastModified}</span>
                        <span>${$data.SizeString()  }</span>
                        <span class="item-marker">
                            {{if CheckoutUser }}
                                <i class="icon-pop-out fg-darkRed">${CheckoutUser}</i>
                            {{/if}}
                        </span>
                    </div>
                    <div class="list-description">
                        <a href="javascript:void(0);" class="item-description">${SearchContent}</a>
                    </div>
                    <span class="list-remark fg-darkRed">
                    </span>
                </div>
                <div class="list-context-menu"></div>
            </div>
        {{/if}}
    </div>
</script>

<script id="fileitem-more-template" type="text/x-jquery-tmpl">
    <div class="morePage">
        <i class=" icon-download-2">@(CloudStorageLight.SampleWeb.Models.Messages.MsgMoreData)</i>
    </div>
</script>


<script id="accesstoken-template" type="text/x-jquery-tmpl">
    <tr class="token-line">
        <td>
            <input type="checkbox" class="accessToken-inuse" />
        </td>
        <td>
            {{if name }}
            <span>${name}</span>
            <input class="accessToken-name" type="hidden" value="${name}" />
            {{else}}
            <input class="accessToken-name" type="text" />
            {{/if}}
        </td>
        <td>
            <input type="checkbox" class="accessToken-can-read" />
        </td>
        <td>
            <input type="checkbox" class="accessToken-can-write" />
        </td>
        <td>
            <input type="checkbox" class="accessToken-can-modify" />
        </td>
        <td>
            <input type="checkbox" class="accessToken-can-control" />
        </td>
    </tr>

</script>

    <script type="text/javascript">
        @Html.Partial("_Message")

        $(function () {
            CloudStorageLight.StorageController.getFiles($("#file-items"), '@(Model.Current)');

            $('#upload').fileupload({
                dropZone: $('#file-drop-cont'),
                singleFileUploads: true,
                add: function (e, data) {
                    CloudStorageLight.StorageController.upload(data);
                },
                done: function (e, data) {
                }
            });

            var topBtn = $('#page-top');
            topBtn.hide();
            $(window).scroll(function () {
                if ($(this).scrollTop() > $(window).height()) {
                    topBtn.fadeIn();
                } else {
                    topBtn.fadeOut();
                }
            });
            topBtn.click(function () {
                $('body,html').animate({
                    scrollTop: 0
                }, 500);
                return false;
            });

            $(window).bottom({ proximity: 0.05 });

        });

    </script>
}
